import React, {Component} from 'react';
import axios from "axios";

class Search extends Component {

    searchUser=()=>{
    //获取用户的输入(连续解构赋值并重命名)
    const {keyWordElement:{value:keyWord}} = this
    //发送请求前通知app更新状态
    this.props.updateAppState({isFirst: false,isLoading: true})
    //送网络请求
    axios.get(`/api1/search/users?q=${keyWord}`).then(
        response => {
            //发送请求后通知app更新状态
            this.props.updateAppState({isFirst: false, isLoading: false, users: response.data.items})
        },
        error => {
            //发送请求后通知app更新状态
            this.props.updateAppState({isLoading: false,err:error.message,users: []})
        }
    )
    }
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索github用户</h3>
                <div>
                    <input ref={c=>this.keyWordElement=c} type="text" placeholder="输入关键字点击搜索"/>&nbsp;
                    <button onClick={this.searchUser}>搜索</button>
                </div>
            </section>
        );
    }
}

export default Search;
